<template>
  <div>
    <div class="rowbox">
      <div v-if="showVideoLoading" v-loading="showVideoLoading" class="videostyle"></div>
      <video ref="viderRef" :src="videoUrl" controls class="videostyle" autoplay v-else></video>

      <div class="videolistbox">
        <div
          class="cell"
          v-for="(item, index) in videoList"
          :key="index"
          @click="handleVideo(item.videoGuid, index)"
        >
          <div type="primary">{{ item.videoName }}</div>
          <div class="time">{{ item.collectTime }}</div>
          <div class="time">{{ item.videoTime }}</div>
          <div class="tips">{{ currentIndex == index ? '正在播放' : '' }}</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { PalyVideoApi } from '@/api/course'
import { VideoDt } from '@/api/course/type'

import { onMounted, ref } from 'vue'

const props = defineProps({
  videoList: {
    type: Array<VideoDt>,
    default: () => []
  }
})

onMounted(() => {
  if (props.videoList.length > 0) {
    handleVideo(props.videoList[0].videoGuid, 0)
  }
})

const videoUrl = ref()
const viderRef = ref()
const currentIndex = ref(0)

const showVideoLoading = ref(true)

const handleVideo = (videoGuid, index) => {
  currentIndex.value = index
  showVideoLoading.value = true
  PalyVideoApi({ videoGuid }).then((res) => {
    showVideoLoading.value = false
    if (res.code == 0) {
      videoUrl.value = res.data
      console.log(videoUrl.value)
    }
  })
}
</script>
<style lang="scss" scoped>
.rowbox {
  display: flex;
  justify-content: space-between;
  background: white;
  //   margin-bottom: 10px;
  .videostyle {
    width: 70%;
    // height: 100%;
    height: 400px;
  }
  .videolistbox {
    margin-left: 20px;
    flex: 1;
    height: 400px;
    overflow-y: scroll;
    // overflow-y: auto;
    .cell {
      padding: 8px 16px;
      border-bottom: 1px solid #ccc;
      font-size: 14px;
      color: #000;
      font-weight: 600;
      cursor: pointer;

      &:hover {
        background-color: #f5f5f5;
      }

      .time {
        font-size: 10px;
        color: #999;
        font-weight: normal;
        margin-top: 6px;
      }
      .tips {
        color: red;
        margin-top: 4px;
        font-size: 10px;
      }
    }
  }
}
</style>
